<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>文件管理</title>
    <%@ include file="/commons/global.jsp" %>
    <%@ include file="/commons/basejs.jsp" %>
    <style type="text/css">
        #doc_table li{
            position: relative;
            float: left;
            margin: 0px 0px 10px 10px;
        }
        .file{
            width: 100px;
            text-align: center;
            height: 125px;
        }
    </style>
    <script type="text/javascript">
        var $this;
        $(function(){
            //flag标志位1-向前 -1向后
            getDocs('',1);
        })






        /**
         * 返回上一级
         */
        function backDoc(){
            var id=$('#prev').val();
            if(!isNull(id)){
                $.ajax({
                    url:'${ctxPath}/doc/get/'+id,
                    dataType:'json',
                    success:function(data){
                        if(data.success){
                            var pid=data.obj.pid;
                            getDocs(pid,-1);
                        }
                    }
                })
            }else{
                getDocs("",-1);
            }
        }

        /**
         * 刷新
         */
        function refreshDoc(){
            var pid=$('#select').val();
            getDocs(pid,1);
        }




        /**
         * 获取数据
         */
        function getDocs(pid,flag){
            progressLoad();
            $.ajax({
                url:'${ctxPath}/doc/findByPid',
                data:{pid:pid,status:1},
                type:'post',
                dataType:'json',
                success:function(result){
                    progressClose();
                    if(result.success){
                        var data=result.obj;
                        render(data,flag);
                    }
                }
            })
        }
        function openDir(id,pid,path){
            $.ajax({
                url:'${ctxPath}/doc/get/'+id,
                dataType:'json',
                success:function(data) {
                    if (data.success) {
                        var pid = data.obj.pid;
                        var name=data.obj.name;
                        var cur_location=$('#cur_location').text();
                        if(cur_location=="/"){
                            cur_location=cur_location+name;
                        }else{
                            cur_location=cur_location+"/"+name;
                        }
                        $('#cur_location').html(cur_location);
                        $('#prev').val(pid);
                        getDocs(id,1);
                    }
                }
            })

        }
        function render(data,flag) {
            $('#doc_table').html('');
            var html="";
            if(data.length>0){
                if(flag==-1){
                    $('#prev').val(data[0].pid=='null'?"":data[0].pid);
                    var cur_location=$('#cur_location').text();
                    cur_location=cur_location.substr(0,cur_location.lastIndexOf('/'));
                    if(cur_location==""){
                        cur_location="/";
                    }
                    $('#cur_location').text(cur_location);
                    $('#select').val('');
                    $('#selectName').val('根目录/');
                    $('#pid').val('');
                }
                for(var i=0;i<data.length;i++){
                    if(data[i].type==1){//文件夹
                        html+='<li class="file dir"  onclick="selectDir(this,\''+data[i].id+'\')" data-id="'+data[i].id+'" ondblclick="openDir(\''+data[i].id+'\',\''+data[i].pid+'\',\''+data[i].path+'\')"><img src="${staticPath}/static/img/doc/dir.png" alt="" title="'+data[i].name+'">'
                            +'<br>'
                            +'<span title="'+data[i].name+'">'+str2span(data[i].name,18)+'</span>'
                            +' </li>';
                    }else{//文件
                        if(data[i].fileType=='zip' || data[i].fileType=='htm' || data[i].fileType=='html' || data[i].fileType=='pdf' || data[i].fileType=='mp4' || data[i].fileType=='mp3'
                            ||data[i].fileType=='json'|| data[i].fileType=='ppt'|| data[i].fileType=='xls' || data[i].fileType=='txt'||data[i].fileType=='xlsx'||data[i].fileType=='doc'||data[i].fileType=='py'
                            ||data[i].fileType=='vue'||data[i].fileType=='sql'||data[i].fileType=='js'||data[i].fileType=='java'||data[i].fileType=='xml'||data[i].fileType=='css'){
                            html+='<li class="file" data-id="'+data[i].id+'"><img src="${staticPath}/static/img/doc/'+data[i].fileType+'.png" alt="" title="'+data[i].name+'  '+data[i].size+'">'
                                +'<br>'
                                +'<span title="'+data[i].name+'">'+str2span(data[i].name,18)+'</span>'
                                +' </li>';
                        }else if(data[i].fileType=='c' || data[i].fileType=='cpp'){
                            html+='<li class="file" data-id="'+data[i].id+'"><img src="${staticPath}/static/img/doc/code.png" alt="" title="'+data[i].name+'  '+data[i].size+'">'
                                +'<br>'
                                +'<span title="'+data[i].name+'">'+str2span(data[i].name,18)+'</span>'
                                +' </li>';
                        }else if(data[i].fileType=='rar'){
                            html+='<li class="file" data-id="'+data[i].id+'"><img src="${staticPath}/static/img/doc/zip.png" alt="" title="'+data[i].name+'  '+data[i].size+'">'
                                +'<br>'
                                +'<span title="'+data[i].name+'">'+str2span(data[i].name,18)+'</span>'
                                +' </li>';
                        }else{
                            html+='<li class="file" data-id="'+data[i].id+'"><img src="${staticPath}/static/img/doc/file.png" alt="" title="'+data[i].name+'  '+data[i].size+'">'
                                +'<br>'
                                +'<span title="'+data[i].name+'">'+str2span(data[i].name,18)+'</span>'
                                +' </li>';
                        }
                    }
                }
            }

            $('#doc_table').append(html);
        }
        function selectDir(obj,id){
            var name=$(obj).find('span').attr('title');
            $.each($('#doc_table li .select'),function(index,item){
                $(this).prev().remove();
                $(this).remove();
            });
            if(id!='${id}'){
            $(obj).append('<br/><img class="select" src="${path}/static/img/selected.png">');
                  $('#select').val(id);
                  $('#selectName').val(name);
            }else{
                $('#select').val('');
                $('#selectName').val('根目录/');
            }
        }


    </script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true,border:true" >
    <div data-options="region:'center',border:true" style="padding: 10px;">
        <div style="border-bottom: 1px solid #eee8d5;padding: 10px;">当前位置:
            <span id="cur_location">/</span>
            <input type="hidden"  id="prev" value="">
            <input type="hidden"  id="select" value="">
            <input type="hidden"  id="selectName" value="根目录/">
        </div>
        <div style="padding: 10px;">
            <button class="easyui-linkbutton"  data-options="iconCls:'fi-arrow-left  icon-grey'" onclick="backDoc()">返回</button>
            <button class="easyui-linkbutton" data-options="iconCls:'fi-loop  icon-grey'" onclick="refreshDoc()">刷新</button>
        </div>
        <div style="padding: 10px;padding-left:0px;">
            <ul style="list-style: none;" id="doc_table">

            </ul>
        </div>


    </div>
</div>
</body>
</html>